var ec_left2 = echarts.init(document.getElementById("l2"));

var option_left2 = {
	tooltip: {
		trigger: "axis",
	},
	dataZoom: [{
		type: "slider",
		show: false,
		startValue: 0,
		endValue: 4,
		xAxisIndex: [0],
	}],
	color: ["#2f89cf"],
	grid: {
		left: "0%",
		top: "10px",
		right: "0%",
		bottom: "4%",
		containLabel: true
	},
	xAxis: {
		type: 'category',
		data: [],
		axisLabel: {
			color: "rgba(255,255,255,.6)",
			fontSize: "12"
		},
		axisLine: {
			show: false
		}
	},
	yAxis: {
		type: 'value',
		axisLabel: {
			color: "rgba(255,255,255,.6)",
			fontSize: "12"
		},
		axisLine: {
			lineStyle: {
				color: "rgba(255,255,255,.1)",
			}
		},
		splitLine: {
			lineStyle: {
				color: "rgba(255,255,255,.1)"
			}
		}
	},
	series: [{
		data: [],
		type: 'bar',
		label: {
			show: true
		},
		showBackground: true,
		backgroundStyle: {
			color: 'rgba(180, 180, 180, 0.2)'
		}
	}]
};

ec_left2.setOption(option_left2);

function get_l2_data() {
	$.ajax({
		url: "/l2",
		success: function (data) {
			var length = data.name.length;
			option_left2.xAxis.data = data.name;
			option_left2.series[0].data = data.Iad;
			if (option_left2.dataZoom[0].endValue >= length - 1) {
				option_left2.dataZoom[0].endValue = length - 1;
				option_left2.dataZoom[0].startValue = length - 5;
			} else {
				option_left2.dataZoom[0].endValue += 1;
				option_left2.dataZoom[0].startValue += 1;
			}
			ec_left2.setOption(option_left2);
		},
		error: function (xhr, type, errorThrown) { }
	});
}

get_l2_data();
setInterval(get_l2_data, 2000);
window.addEventListener("resize", function () {
	ec_left2.resize();
});

function reset_l2_data() {
	option_left2.dataZoom[0].startValue = 0;
	option_left2.dataZoom[0].endValue = 4;
	ec_left2.setOption(option_left2);
}

ec_left2.on('dataZoom', function (params) {
	var length = option_left2.xAxis.data.length;
	if (params.start >= length - 5 && params.start <= length - 1) {
		setTimeout(reset_l2_data, 1000);
	}
});